<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 300px;
            height: 300px;
            background: red;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background: green;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>
</body>
<script>
    var obox1 = document.querySelector(".box1")
    var obox2 = document.querySelector(".box2")
    var obox3 = document.querySelector(".box3")

    // obox1.onclick = function(){
    //     alert("red")
    // }
    // obox2.onclick = function(){
    //     alert("green")
    // }
    // obox3.onclick = function(){
    //     alert("blue")
    // }

    // 默认冒泡

    // 通过第三个参数修改：
    // 布尔值：
    // true：捕获
    // false：冒泡

    obox1.addEventListener("click", function(){
        alert("捕获的red");
    }, true)
    obox2.addEventListener("click", function(){
        alert("捕获的green");
    }, true)
    obox3.addEventListener("click", function(){
        alert("捕获的blue");
    }, true)
    // obox1.addEventListener("click", function(){
    //     alert("冒泡的red");
    // }, false)
    // obox2.addEventListener("click", function(){
    //     alert("冒泡的green");
    // }, false)
    // obox3.addEventListener("click", function(){
    //     alert("冒泡的blue");
    // }, false)

    // ===========


    // obox1.onclick = function (eve) {
    //     stopBubble(eve)
    //     alert("red")
    // }
    // obox2.onclick = function (eve) {
    //     var e = eve || window.event;
    //     stopBubble(e)
    //     alert("green")
    // }
    // obox3.onclick = function (eve) {
    //     var e = eve || window.event;
        // // 正常
        // e.stopPropagation();
        // // IE低版本
        // e.cancelBubble = true;
        // stopBubble(e);
        // alert("blue");
    // }

    // document.onclick = function () {
    //     alert("document")
    // }

    function stopBubble(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    }

</script>
</html>